<template>
    <h1>获取秒杀或推荐商品的列表</h1>
    <el-select v-model="value" class="m-1" placeholder="是否秒杀" size="large" clearable
        @change="(val: string) => lookIsseckill(val)">
        <el-option v-for="item in seckill" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-select v-model="value1" class="m-2" placeholder="是否推荐" size="large" clearable
        @change="(val1: string) => lookIsrecommend(val1)">
        <el-option v-for="item in recommend" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-table :data="list" style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="proid" label="编号" width="200" />
        <el-table-column label="图片" width="100">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="250" />
        <el-table-column prop="brand" label="品牌" width="160" />
        <el-table-column prop="originprice" label="价格" width="80" />
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="sales" label="销量" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
        <template v-if="isShowEdit">
            <el-table-column label="是否秒杀" >
                <template #default="scope">
                    <el-switch v-model="scope.row.isseckill" :active-value="1" :inactive-value="0" 
                    @change="(val: number) => updateisseckill(scope.row.proid, val)" />
                </template>
            </el-table-column>
        </template>
        <template v-if="BB">
        <el-table-column label="是否推荐" >
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0" 
                @change="(val: number) => updateisrecommend(scope.row.proid, val)"/>
            </template>
        </el-table-column>
    </template>
    </el-table>
</template>

<script setup lang="ts">
import { admin_pro_showdata,admin_pro_updateFlag } from "../../../utils/api";
import { reactive, ref } from 'vue';
import { ElNotification } from 'element-plus'
import "element-plus/es/components/notification/style/css"
const value = ref('')
const value1 = ref('')
const isShowEdit = ref(false);
const BB = ref(false);
// 是否秒杀的数据
const seckill = [
    {
        value: '是',
        label: '是',
    },
    {
        value: '否',
        label: '否',
    },
]
// 是否推荐
const recommend = [
    {
        value: '是',
        label: '是',
    },
    {
        value: '否',
        label: '否',
    },
]
// 定义查询的结果（表格里的数据）
interface lists {
    proid: string,
    img1: string,
    proname: string,
    brand: string,
    originprice: number,
    discount: number,
    sales: number,
    stock: number,
    isseckill: number,
    isrecommend: number
}

const list = reactive<lists[]>([])
// 是否秒杀的参数
// 是秒杀状态的参数
const params = reactive<{
    type: string,
    flag: number,
}>({
    type: "isseckill",
    flag: 1
})
// 不是秒杀状态的参数
const noparams = reactive<{
    type: string,
    flag: number,
}>({
    type: "isseckill",
    flag: 0
})
// 是否推荐的请求参数
// 是推荐状态的参数
const paramss = reactive<{
    type: string,
    flag: number,
}>({
    type: "isrecommend",
    flag: 1
})
// 不是推荐状态的参数
const noparamss = reactive<{
    type: string,
    flag: number,
}>({
    type: "isrecommend",
    flag: 0
})
// 是否秒杀的请求
const lookIsseckill = (str: string) => {
    isShowEdit.value= true
    console.log(isShowEdit);
    
    if (str === "是") {
        const getgoods = () => {
            admin_pro_showdata(params).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } else if (str === "否") {
        const getgoods = () => {
            admin_pro_showdata(noparams).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } else {
        isShowEdit.value = false
        list.length = 0;
    }
}
//是否推荐的请求
const lookIsrecommend = (str: string) => {
    BB.value = true
    if (str === "是") {
        const getgoods = () => {
            admin_pro_showdata(paramss).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } else if (str === "否") {
        const getgoods = () => {
            admin_pro_showdata(noparamss).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } else {
        BB.value = false
        list.length = 0;
    }
}
// 更新商品推荐状态
const updateisrecommend = (proid: string, val: number) => {
    admin_pro_updateFlag({
        proid: proid,
        type: "isrecommend",
        flag: val
    }).then((res: any) => {
        if (res.data.code === "200") {
            // 判断一下Val的值
            if (val == 1) {
                ElNotification({
                    title: "提示",
                    message: "推荐成功",
                    type: "success",
                })
            } else {
                ElNotification({
                    title: "提示",
                    message: "取消推荐",
                    type: "success",
                })
            }
        }
    })
}
// 更新商品秒杀状态
const updateisseckill = (proid: string, val: number) => {
    admin_pro_updateFlag({
        proid: proid,
        type: "isseckill",
        flag: val
    }).then((res: any) => {
        if (res.data.code === "200") {
            if (val == 1) {
                ElNotification({
                    title: "提示",
                    message: "更新秒杀成功",
                    type: "success",
                })
            } else {
                ElNotification({
                    title: "提示",
                    message: "取消秒杀",
                    type: "success",
                })
            }
        }
    })
}
</script>

<style scoped>
.img {
    width: 50%;
    height: 50%;
}

.active {
    color: red;
    font-weight: 700;
}
</style>